﻿@using System.Web.Optimization
@using MultiTenant.Common.Types
@using MultiTenant.Helpers
@model MultiTenant.Models.StoreViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="@Url.Style("Store.css")" rel="stylesheet" type="text/css"/>

<h2>This is the CORE store2.</h2>

@{ Html.EnableClientValidation(); }
@using (Html.BeginForm("StoreApi/Post", "api", FormMethod.Post, new {id = "storesForm"}))
{
    <div id="storeGrid"></div>
    <div id="storeButtonPanel">
        <input class="k-button" data-bind="click: onExpandAllClick" id="expandAllButton" type="button" value="++" />
        <input class="k-button" data-bind="click: onCollapseAllClick" id="collapseAllButton" type="button" value="--" />
        <input class="k-button" type="submit" id="saveButton" value="Save"/>
        <input class="k-button" data-bind="click: onDeleteClick" id="deleteButton" type="button" value="Delete" />
    </div>
    <div class="panel storePanel">
        <div class="panelHeader">
            <input class="k-button" data-bind="click: onStoreClick" id="storeButton" type="button" value="-" />
            <strong>Store</strong>
        </div>
        <div id="storeDetail">
            <div class="storeLine">
                <span class="storeLabel">Id:</span>
                <span>@Html.TextBoxFor(model => model.Id, new {@class = "k-textbox", data_bind = "value: id"})</span>
            </div>
            <div class="storeValidation">@Html.ValidationMessageFor(model => model.Id)</div>
            <div class="storeLine">
                <span class="storeLabel">Name:</span>
                <span>@Html.TextBoxFor(model => model.Name, new {@class = "k-textbox", data_bind = "value: name"})</span>
            </div>
            <div class="storeValidation">@Html.ValidationMessageFor(model => model.Name)</div>
            <div class="storeLine"> 
                <span class="storeLabel">Number:</span>
                <span>@Html.TextBoxFor(model => model.Number, new {@class = "k-textbox", data_bind = "value: number"})</span>
            </div>
            <div class="storeValidation">@Html.ValidationMessageFor(model => model.Number)</div>
            <div class="storeLine">
                <span class="storeLabel">City:</span>
                <span>@Html.TextBoxFor(model => model.City, new {@class = "k-textbox", data_bind = "value: city"})</span>
            </div>
            <div class="storeLine">
                <span class="storeLabel">State:</span>
                <span>@Html.TextBoxFor(model => model.State, new {@class = "k-textbox", data_bind = "value: state"})</span>
            </div>
        </div>
    </div>
}

@if (AccessHelper.HasAccess(Model.CurrentTenant, AccessTypes.ProgramFeature))
{
    <div class="panel storePanel">
        <div class="panelHeader">
            <input class="k-button" data-bind="click: onProgramClick" id="programButton" type="button" value="-" />
            <strong>Programs</strong>
        </div>
        <div id="programDetail">
            <div id="programValidation" style="display: none">
                <strong>Program is required.</strong>
            </div>
            <div class="programLine">
                <span class="programLabel">Program:</span><span class="programDropDown"></span>
                <span class="programLabel">Survey:</span><span class="surveyDropDown"></span>
            </div>
            <div class="programLine">
                <span class="programLabel">Program:</span><span class="programDropDown"></span>
                <span class="programLabel">Survey:</span><span class="surveyDropDown"></span>
            </div>
            <div class="programLine">
                <span class="programLabel">Program:</span><span class="programDropDown"></span>
                <span class="programLabel">Survey:</span><span class="surveyDropDown"></span>
            </div>
        </div>
    </div>
}

<div class="panel traitPanelExpanded" id="traitPanel">
    <div class="panelHeader">
        <input class="k-button" data-bind="click: onTraitClick" id="traitButton" type="button" value="-" />
        <strong>Traits</strong>
    </div>
    <div id="traitDetail">
        <div id="traitValidation" style="display: none">
            <strong>Trait is required.</strong>
        </div>
        <div class="panel" id="traitViewPanel">
            <div class="panelHeader">
                <strong>View Traits</strong>
                <input class="k-button" data-bind="click: onDeleteTraitClick" id="deleteTraitButton" type="button" value="Delete" />
            </div>
            <div id="traitViewGrid"></div>
        </div>
        @if (!AccessHelper.HasAccess(Model.CurrentTenant, AccessTypes.ProgramFeature))
        {
            <div id="traitAddButton">
                <input type="button" value="+" />
            </div>

            <div class="panel" id="traitAddPanel">
                <div class="panelHeader">
                    <strong>Add Traits</strong>
                </div>
                <div id="traitAddGrid"></div>
            </div>
        }
    </div>
</div>

@Scripts.Render("~/Scripts/store.bundle.javascript")

<script type="text/javascript">
    (function() {
        var programFeature = @Html.Raw(Json.Encode(AccessHelper.HasAccess(Model.CurrentTenant, AccessTypes.ProgramFeature)));
        var viewModel = storeViewModelFactory({
            deleteStoreUrl: "@Url.Action("Delete", "api/StoreApi", new { Area = "" })",
            deleteTraitUrl: "@Url.Action("Delete", "api/TraitApi", new { Area = "" })",
            getStoreUrl: "@Url.Action("Get", "api/StoreApi", new { Area = "" })",
            programFeature: programFeature,
            tenantId: "@Model.CurrentTenant.Id",
            tenantIdApple: "@TenantIds.AppleId"
        });
        viewModel.setObservables();
        $('#storesForm').ajaxForm({
            beforeSubmit: viewModel.onBeforeSubmit,
            dataType: 'json',
            iframe: false,
            success: function() {
                viewModel.onStoreSuccess();
            },
            type: 'POST'
        });
        $("#storeGrid").kendoGrid({
            autoBind: true,
            change: function() {
                viewModel.onStoreGridChanged();
            },
            filterable: false,
            groupable: false,
            height: "300px",
            pageable: true,
            resizeable: true,
            selectable: "single, row",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            dataSource: {
                pageSize: 30,
                type: "json",
                transport: {
                    read: function(options) {
                        $.ajax({
                            url: "@Url.Action("GetStores", "api/StoreApi", new { Area = ""})",
                            success: function(result) {
                                options.success(result);
                            },
                            type: "GET"
                        });
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            City: { type: "city" },
                            Name: { type: "string" },
                            Number: { type: "number" },
                            State: { type: "string" }
                        }
                    }
                }
            },
            columns: [
                {
                    field: "Id",
                    title: "Id",
                    width: "70px"
                },
                {
                    field: "Name",
                    title: "Name",
                    width: "180px"
                }, {
                    field: "Number",
                    title: "Number",
                    width: "90px"
                },
                {
                    field: "City",
                    title: "City",
                    width: "180px"
                },
                {
                    field: "State",
                    title: "State",
                    width: "80px"
                }]
        });
        viewModel.storeGridData = $('#storeGrid').data('kendoGrid');
        if (programFeature) {
            $('.programDropDown').kendoComboBox({
                dataTextField: "Value",
                dataValueField: "Key",
                dataSource: {
                    transport: {
                        read: {
                            type: 'GET',
                            url: '@Url.Action("GetProgramItems", "api/ProgramApi", new { Area = ""})'
                        }
                    }
                }
            });
            $('.surveyDropDown').kendoComboBox({
                dataTextField: "Value",
                dataValueField: "Key",
                dataSource: {
                    transport: {
                        read: {
                            type: 'GET',
                            url: '@Url.Action("GetSurveyItems", "api/SurveyApi", new { Area = ""})'
                        }
                    }
                }
            });
        }
        if (programFeature) {
            $("#traitViewGrid").kendoGrid({
                autoBind: true,
                change: function() {
                },
                filterable: false,
                groupable: false,
                height: "90%",
                pageable: true,
                resizeable: true,
                selectable: "single, row",
                sortable: {
                    mode: "single",
                    allowUnsort: false
                },
                dataSource: {
                    pageSize: 30,
                    type: "json",
                    transport: {
                        read: function(options) {
                            $.ajax({
                                url: "@Url.Action("GetViewTraits", "api/TraitApi", new { Area = ""})",
                                success: function(result) {
                                    options.success(result);
                                },
                                type: "GET"
                            });
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Name: { type: "string" },
                            }
                        }
                    }
                },
                columns: [
                    {
                        field: "Name",
                        title: "Name",
                        width: "180px"
                    }]
            });
            viewModel.traitViewGridData = $("#traitViewGrid").data('kendoGrid');
        } else {
            $("#traitViewGrid").kendoGrid({
                autoBind: true,
                change: function() {
                },
                filterable: false,
                groupable: false,
                height: "90%",
                pageable: true,
                resizeable: true,
                selectable: "single, row",
                sortable: {
                    mode: "single",
                    allowUnsort: false
                },
                dataSource: {
                    pageSize: 30,
                    type: "json",
                    transport: {
                        read: function(options) {
                            $.ajax({
                                url: "@Url.Action("GetViewTraits", "api/TraitApi", new { Area = ""})",
                                success: function(result) {
                                    options.success(result);
                                },
                                type: "GET"
                            });
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Name: { type: "string" },
                            }
                        }
                    }
                },
                columns: [
                    {
                        field: "Name",
                        title: "Name",
                        width: "180px"
                    }]
            });
            viewModel.traitViewGridData = $("#traitViewGrid").data('kendoGrid');
            $("#traitAddGrid").kendoGrid({
                autoBind: true,
                change: function() {
                },
                height: "90%",
                filterable: false,
                groupable: false,
                pageable: true,
                resizeable: true,
                selectable: "single, row",
                sortable: {
                    mode: "single",
                    allowUnsort: false
                },
                dataSource: {
                    pageSize: 30,
                    type: "json",
                    transport: {
                        read: function(options) {
                            $.ajax({
                                url: "@Url.Action("GetAddTraits", "api/TraitApi", new { Area = ""})",
                                success: function(result) {
                                    options.success(result);
                                },
                                type: "GET"
                            });
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Name: { type: "string" },
                            }
                        }
                    }
                },
                columns: [
                    {
                        field: "Name",
                        title: "Name",
                        width: "180px"
                    }]
            });
            viewModel.traitAddGridData = $("#traitAddGrid").data('kendoGrid');
        }
        ko.applyBindings(viewModel);
    })();
</script>
